<template>
  <div>
    <!-- 广告区域 -->
    <div class="swipe">
      <el-carousel :height="'500px'" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in swipeList" :key="index">
          <img :src="item.img"> 
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <div class="blocks">
      <div class="each" v-for="item in blocks">
        <img :src="item.img" alt="">
        <div class="title">{{item.title}}</div>
        <div class="en">{{item.en}}</div>
      </div>
    </div>

    <div class="intro">
      <div style="margin: auto;display: flex;align-items: center;width: 80%;gap: 20px;">
        <img src="../assets/intro-img.png" alt="">
        <div>
          <div style="text-align: center;">北京市平均每天有近2000人等待输血来维系生命，他们可能是一个外伤患者，一名孕产妇，一位晚期癌症患者，或者是一个白血病患儿。因为无偿献血，一台迫在眉睫的手术不再因为术前库存不足而取消，一个垂危的生命不再因为缺血而受到危及，一个苦苦等待的家庭也不再因为失去亲人而变得支离破碎。</div>
          <div style="text-align: center;">无偿献血就是我们的超能力，一种能够挽救生命的超能力。</div>
          <div class="btn" @click="link">了解更多（跳转到献血知识）</div>
        </div>
      </div>
    </div>

    <div class="menus">
      <div v-for="item in menus" class="menu" @click="navigate(item)">
        <img :title="item.title" :src="item.img" alt="">
      </div>
    </div>
    <div style="width: 100%;height: 50px;">

    </div>
  </div>
</template>

<script>
export default {
  name: "YHome",
  data() {
    return {
      keywords: "",
      types: [],
      activeName: "",
      data: [],
      blocks: [
        {
          img: require('../assets/block1.png'),
          title: '国际化设备',
          en: 'Internation Standard'
        },
        {
          img: require('../assets/block2.png'),
          title: '专家团队',
          en: 'Experienced Medical Team'
        },
        {
          img: require('../assets/block3.png'),
          title: '体检环境',
          en: 'Examination Environment'
        },
        {
          img: require('../assets/block4.png'),
          title: '质控体系',
          en: 'Heaith Examination'
        },
      ],
      menus: [
        {
          img: require('../assets/首页-置灰.svg'),
          router: 'news',
          title: '新闻中心'
        },
        {
          img: require('../assets/关注-置灰.svg'),
          router: 'knowledge',
          title: '献血知识'
        },
        {
          img: require('../assets/提交验资.svg'),
          router: 'square',
          title: '用血报销'
        },
        {
          img: require('../assets/安全保障.svg'),
          router: 'admin',
          title: '后台管理'
        },
      ],
      swipeList: [
        {
          img: require('../assets/swipe1.png')
        },
        {
          img: require('../assets/swipe2.png')
        }
      ]
    };
  },
  methods: {
    navigate(item) {
      if (item.router === 'admin') {
        window.open('http://localhost:8080/')
      } else {
        this.$router.push(`/${item.router}`);
      }
    },
    link() {
      this.$router.push(`/knowledge`);
    }
  },
};
</script>

<style lang="scss" scoped>
.ck {
  margin-bottom: 20px;
}
.tabs {
  width: 550px;
  margin: 0 auto;
}
.swipe {
  width: 100vw;
  margin: 0 auto;

  img {
    width: 100%;
    height: 500px;
  }
}
.blocks {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 40px;
  justify-content: space-between;

  .each {
    width: 160px;

    img {
      width: 160px;
      height: 160px;
      border-radius: 50%;
    }

    .title,
    .en {
      width: 100%;
      text-align: center;
    }

    .title {
      color: #333;
    }
    .en {
      color: rgb(153, 153, 153);
    }
  }

}
.intro {
  width: 1200px;
  height: 400px;
  margin: 20px auto;
  background: url(../assets/intro.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;

  img {
    width: 350px;
    height: 250px;

  }

  .btn{
    background: #b3c2e7;
    width: 256px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 6px;
    margin-top: 10px;
  }
}
.menus {
  width: 1200px;
  margin: 40px auto;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
  .menu {
    img {
      width: 60px;
    }
    cursor: pointer;
  }
}
</style>
